<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 用户信息添加 -->
			<div>
				<h4>新建用户信息</h4>
				<ul>
					<li><label for="id">编号:<input type="text" v-model="userinfo.id" id="id"></label></li>
					<li><label for="name">姓名:<input type="text" v-model="userinfo.name" id="name"></label></li>
					<li><label for="age">年龄:<input type="text" v-model="userinfo.age" id="age"></label></li>
					<li><label for="sex">性别:<input type="text" v-model="userinfo.sex" id="sex"></label></li>
					<li><button type="button" @click="adduser()">提交</button></li>
				</ul>
			</div>
			
			<!-- 用户信息修改 -->
			<div>
				<h4>修改用户信息</h4>
				<ul>
					<li><label for="id">编号:<input type="text" v-model="editinfo.id" id="id"></label></li>
					<li><label for="name">姓名:<input type="text" v-model="editinfo.name" id="name"></label></li>
					<li><label for="age">年龄:<input type="text" v-model="editinfo.age" id="age"></label></li>
					<li><label for="sex">性别:<input type="text" v-model="editinfo.sex" id="sex"></label></li>
					<li><button type="button" @click="moduser()">确认修改</button></li>
				</ul>
			</div>
			<!-- 用户信息展示 -->
			<section>
				<div v-if="userList.length>0">
					<table border="1" cellspacing="0" cellpadding="0">
						<tr>
							<th>编号</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>性别</th>
							<th>控制</th>
						</tr>
						<tr v-for="(item,index) of userList" :key="">
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.age}}</td>
							<td>{{item.sex}}</td>
							<td>
								<button type="button" @click="deluser(index)">删除</button>
								<button type="button" @click="edituser(index)">修改</button>
							</td>
						</tr>
					</table>
				</div>
				<div v-else>
					<h4>当前没有用户信息</h4>
				</div>
			</section>
			
		</div>
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/demo8.js" type="text/javascript" charset="utf-8"></script>

	</body>
</html>
